<template>
  <div class="news-list">
    <li>{{ query.id }}</li>
    <li>{{ query.title }}</li>
    <li>{{ query.content }}</li>
  </div>
</template>

<script setup lang="ts" name="About">
import { toRefs, reactive } from "vue";
import { useRoute } from "vue-router";
//获取当前路由信息
//路径route.path
//参数route.params
//查询字符串 route.query
let route = useRoute();
//从响应式对象身上直接解构属性会丢失响应式
let { query } = toRefs(route);
console.log("@", route);
</script>

<style scoped>
.new-list {
  list-style: none;
  padding-left: 20px;
}
.new-list > li {
  line-height: 30px;
}
</style>
